<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<link type="text/css" href="/css/cultivateWeb/style/my.css" rel="stylesheet">
<link type="text/css" href="/css/cultivateWeb/style/news.css" rel="stylesheet">
<link rel="stylesheet" href="/css/cultivateWeb/style/apply.css">
<style>
    .span_1{width: 160px !important;}
</style>
<body>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<div style="clear: both"></div>
<div style="background-color: #f7f7f7; ">
    <div style="height: 40px">
        <p style="margin: 0px auto auto 380px; line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > <a href="/cultivate/my">个人资料</a> > 编辑个人资料</p>
    </div>
    <hr style="margin: auto auto 40px auto  ; width: 1200px"/>
    <section id="info" style="margin-left: 30px;">
        <div style="width: 1150px;margin:0 auto;">
             <span style="float: right"><a href="/cultivate/my"><input class="edit" type="button" value="返回上一页"/></a></span>
            <div style="clear: both"></div>
            <form id="formId"></form>
        </div>
        <div style="clear: both"></div>
    </section>
    <!-- 分页 -->
</div>
<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
<script src="/js/plugins/validate/jquery.validate.extend.js"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/jquery.citys.js"></script>
<script src="/js/layui/layui.js"></script>
</body>

<script>
    $(function () {
        ajaxToken("/jzApi/user/selUserDetail", "GET", {}, function (res) {
             var res = JSON.stringify(res);
                res = res.replace(/null/g, '""');
                res = JSON.parse(res);
            var a = '<div style="text-align: center">' +
                '                    <img id="test" src="' + res.headPortrait + '" style="width:147px;height:206px;margin-top: 20px"/>' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">照片：</label>' +
                '                    <button type="button" class="btn inp_1" style="margin-top: 20px" id="btnUpload">' +
                '                        <i class="fa fa-cloud"></i>重新上传寸照' +
                '                    </button>' +
                '                    <input type="text" value="' + res.headPortrait + '" style="opacity:0;width: 1px;" id="img" name="headPortrait" />' +
                '                    <label class="wd160" style="margin-left: 180px">注意：请上传小于1M的寸照</label>' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">用户名<span style="color: #D52525">*</span>：</label>' +
                '                    <input name="username" value="' + res.username + '" id="username"  class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">真实姓名<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" name="name" value="' + res.name + '" id="name" placeholder="" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">性别<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="hidden" value="' + res.sex + '" id="sex1" placeholder="" class="form-control inp_1" />' +
                '                    <select id="sex" name="sex"  class="form-control inp_1">' +
                '                        <option  value="">请选择</option>' +
                '                        <option value="1">男</option>' +
                '                        <option value="2">女</option>' +
                '                    </select>' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">身份证号：</label>' +
                '                    <input type="text" id="idNumber" value="' + res.idNumber + '" name="idNumber" placeholder="" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">手机号<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" id="mobile" value="' + res.mobile + '" name="mobile" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3 company"  >' +
                '                    <label class="span_1">所属机构/学校名称<span style="color: #D52525">*</span>：</label>' +
                '                    <input type="text" id="orgName" value="' + res.orgName + '" placeholder="" name="orgName"  class="form-control inp_1" />' +
                '                    <div style="clear: none"></div>' +
                '                </div>' +
                '                <div class="div_3 company"  >' +
                '                    <label class="span_1">出生年月：</label>' +
                '                    <input id="dateOfBirth" name="dateOfBirth" class="form-control inp_1"' +
                '                           type="text" value="' + res.dateOfBirth + '" placeholder="请输入出生年月">' +
                '                </div>' +
                '                <div class="div_3 company"  >' +
                '                    <label class="span_1">民族：</label>' +
                '                    <input type="hidden" id="nation1" value="' + res.nation + '" placeholder=""   class="form-control inp_1" />' +
                '                    <select id="nation" name="nation" class="form-control inp_1">' +
                '                        <option value="">请选择</option>' +
                '                        <option value="汉族">汉族</option>' +
                '                        <option value="蒙古族">蒙古族</option>' +
                '                        <option value="回族">回族</option>' +
                '                        <option value="藏族">藏族</option>' +
                '                        <option value="维吾尔族">维吾尔族</option>' +
                '                        <option value="苗族">苗族</option>' +
                '                        <option value="彝族">彝族</option>' +
                '                        <option value="壮族">壮族</option>' +
                '                        <option value="布依族">布依族</option>' +
                '                        <option value="朝鲜族">朝鲜族</option>' +
                '                        <option value="满族">满族</option>' +
                '                        <option value="侗族">侗族</option>' +
                '                        <option value="瑶族">瑶族</option>' +
                '                        <option value="白族">白族</option>' +
                '                        <option value="土家族">土家族</option>' +
                '                        <option value="其他">其他</option>' +
                '                    </select>' +
                '                </div>' +
                '                <div class="div_3 school" >' +
                '                    <label class="span_1" >学历：</label>' +
                '                    <input type="hidden" id="education1" value="' + res.education + '" placeholder="" class="form-control inp_1" />' +
                '                    <select id="education" name="education" class="form-control inp_1">' +
                '                        <option value="">请选择</option>' +
                '                        <option value="博士后">博士后</option>' +
                '                        <option value="博士">博士</option>' +
                '                        <option value="研究生">研究生</option>' +
                '                        <option value="本科">本科</option>' +
                '                        <option value="大专">大专</option>' +
                '                        <option value="大专以下">大专以下</option>' +
                '                    </select>' +
                '                </div>' +
                '                <div class="div_3 school" >' +
                '                    <label class="span_1" >专业：</label>' +
                '                    <input type="text" id="major" value="' + res.major + '" placeholder="" name="major"  class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">政治面貌：</label>' +
                '                    <select id="politicalAffiliation" name="politicalAffiliation" class="form-control inp_1">' +
                '                        <option value="">请选择</option>' +
                '                        <option value="群众">群众</option>' +
                '                        <option value="中国共青团团员">中国共青团团员</option>' +
                '                        <option value="中国共产党党员">中国共产党党员</option>' +
                '                        <option value="无党派民主人士">无党派民主人士</option>' +
                '                        <option value="民主党派人士">民主党派人士</option>' +
                '                    </select>' +
                '                    <input type="hidden" id="politicalAffiliation1" value="' + res.politicalAffiliation + '" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">职务职称：</label>' +
                '                    <input type="text" id="officialCapacity" value="' + res.officialCapacity + '" name="officialCapacity" placeholder="" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">QQ：</label>' +
                '                    <input type="text" id="QQ" name="QQ" value="' + res.qq + '" placeholder="" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">邮箱：</label>' +
                '                    <input type="text" id="email" name="email" value="' + res.email + '" class="form-control inp_1" />' +
                '                </div>' +
                '                <div class="div_3"id="adre">' +
                '                    <label class="span_1">现居住地省市区：</label>' +
                '                    <input type="hidden" style="width: 150px" id="province" value="' + res.province + '"  />' +
                '                    <input type="hidden" style="width: 150px"  id="city" value="' + res.city + '"  />' +
                '                    <input type="hidden" style="width: 150px"  id="district" value="' + res.district + '"  />' +
                '                    <select class="form-control inp_1" name="province" style="width: 150px"></select>' +
                '                    <select class="form-control inp_1" name="city" style="width: 150px;"></select>' +
                '                    <select class="form-control inp_1" name="district" style="width: 150px"></select>' +
                '                </div>' +
                '                <div class="div_3">' +
                '                    <label class="span_1">现居住地：</label>' +
                '                    <textarea  style="height:60px " type="text" id="liveAddress"  name="liveAddress" class="form-control inp_1">' + res.liveAddress + '</textarea>' +
                '                </div>' +
                '                <div class="div_3" style="width: 1000px">' +
                '                    <label class="span_1">学习、工作经历<span style="color: #D52525">(800字以内)</span>：</label>' +
                '                    <textarea style="width:700px;height:200px;" type="text" id="experience" name="experience"  class="form-control inp_1">' + res.experience + '</textarea>' +
                '                </div>' +
                '                  <input type="hidden" name="lastEdit" value="102" />' +
                '                <div class="div_3">' +
                '                    <button class="form-control but_1" id="send" type="submit">提交</button>' +
                '                </div>';
            $("#formId").html(a);

            $("#politicalAffiliation").val($("#politicalAffiliation1").val());
            $("#sex").val($("#sex1").val());
            $("#nation").val($("#nation1").val());
            $("#education").val($("#education1").val());
            //省市区联动
            $('#adre').citys({
                province: $("#province").val(),
                city: $("#city").val(),
                district: $("#district").val(),
                onChange: function (info) {
                }
            }, function (api) {

            });
                layui.use(['upload', 'laydate'], function () {
        var upload = layui.upload;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#dateOfBirth'
        });
        //执行实例
        upload.render({
            elem: '#btnUpload', //绑定元素
            url: '/jzApi/utils/fileImprot', //上传接口
            // auto: false,
            accept: 'images',
            acceptMime: 'image/*', //只筛选图片
            size: 1024, //限定大小
            // choose: function (obj) {  //上传前选择回调方法
            //     obj.preview(function (index, file, result) {
            //         var flag = true;
            //         // console.log(file);            //file表示文件信息，result表示文件src地址
            //         var img = new Image();
            //         img.src = result;
            //         img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
            //             if (img.width == 295 && img.height == 413) {
            //                 obj.upload(index, file); //满足条件调用上传方法
            //             } else {
            //                 flag = false;
            //                 layer.msg("上传的图片必须是295像素*413像素的寸照！");
            //                 return false;
            //             }
            //         };
            //         return flag;
            //     });
            // },
            done: function (r) {
                $("#img").val(r.data);
                $("#test").attr("src", r.data);
            },
            error: function (r) {
                layer.msg(r.msg);
            }
        });
    });
        });
    });
    $(function () {
        validateRule();
    });
    $.validator.setDefaults({
        submitHandler: function () {
            save();
        }
    });

    function save() {

        console.log("idnum = " , $("#idNumber").val())
        if (!cardId().checkIdCardNo($("#idNumber").val().trim())) {
            layer.msg('请输入正确的身份证号');
            return false;
        }

        ajaxTokenForm("/jzApi/user/editUserDetailDoor", "POST", $('#formId').serialize(), function (res) {
            console.log("444" , res)
        })
    }


    function validateRule() {
        var icon = "<i style='color: red;font-size: 14px'>";
        var a = '</i>';
        $("#formId").validate({
            rules: {
                username: {
                    required: true
                },
                name: {
                    required: true
                },
                sex: {
                    required: true
                },
                orgName: {
                    required: true
                },
                mobile: {
                    isPhone: true
                }
            },
            messages: {
                
                username: {
                    required: icon + "请输入用户名"+a
                },
                name: {
                    required: icon + "请输入姓名"+a
                },
                sex: {
                    required: icon + "请选择性别"+a
                },
                orgName: {
                    required: icon + "请输入所在单位名称"+a
                },
                mobile: {
                    required: icon + "请输入手机号"+a
                }
            }
        })
    }

</script>
</html>